import React, { Component } from 'react';
import PubSub from 'pubsub-js';
// import axios from 'axios';

export default class Search extends Component {

    search = async () => {
        //获取用户的输入(连续解构赋值+重命名)
        const { keyWordElement: { value: keyWord } } = this;
        //发送请求前通知List更新状态

        PubSub.publish('atguigu', { isFirst: false, isLoading: true })
        //发送网络请求
        // #region 使用axios发送
        // axios.get(`/api1/search/users2?q=${keyWord}`).then(
        //     response => {
        //         //请求成功后通知List更新状态
        //         PubSub.publish('atguigu', { isLoading: false, users: response.data.items })
        //     },
        //     error => {
        //         //失败后通知List更新状态
        //         PubSub.publish('atguigu', { isLoading: false, err: error.message })
        //     }
        // )
        //#endregion

        //#region 使用fetch发送
        //未优化版本 可以执行
        // fetch(`/api1/search/users2?q=${keyWord}`)
        //     .then(response => {
        //         // 确保这里返回的是 response.json() 的 promise
        //         return response.json();
        //     })
        //     .then(responseData => {
        //         // 处理解析后的数据
        //         console.log('获取数据成功了', responseData);
        //     })
        //     .catch(error => {
        //         // 错误处理应该集中在这里，包括网络错误和解析错误
        //         console.log('请求过程中出现了问题:', error);
        //     });

        //优化版本
        try {
            const response = await fetch(`/api1/search/users2?q=${keyWord}`);
            const data = await response.json();
            PubSub.publish('atguigu', { isLoading: false, users: data.items })
        } catch (e) {
            PubSub.publish('atguigu', { isLoading: false, err: e.message })
        }


    }

    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">搜索Github用户</h3>
                <div>
                    <input ref={c => { this.keyWordElement = c }} type="text" placeholder="输入关键词点击搜索" />&nbsp;
                    <button onClick={this.search}>搜索</button>
                </div>
            </section>
        )
    }
}
